import React from 'react';
import moment from 'moment';
import api from 'js/api/index';
import { List } from 'antd-mobile';
import InfiniteScroll from 'react-infinite-scroller';
import { SelectDate, SelectDateComponent } from 'views/component/selectDate/selectDate';
import SelectTitle from 'views/component/selectTitle/selectTitle';
import { SubViewLink } from 'views/component/subViewLink/subViewLink';
import TableBox from 'views/component/table/table';
import './storeRecord.scss';
import { i18n } from 'js/core/i18n';

let pagesize = 10;
class StoreRecord extends React.Component {
  constructor(props) {
    super()
    this.query = {
      searchkey: '',
      start: props.modelData ? props.modelData.start : moment().add(-100, 'days').format('YYYY-MM-DD'),
      end: props.modelData ? props.modelData.end : moment().format('YYYY-MM-DD'),
      pagesize: pagesize,
      status: '',
      pageindex: 1,
    }
    this.state = {
      start: props.modelData ? props.modelData.start : moment().add(-100, 'days').format('YYYY-MM-DD'),
      end: props.modelData ? props.modelData.end : moment().format('YYYY-MM-DD'),
      dataType: null,
      hasMore: true,
      data: []
    }
  }
  componentDidMount() {
  }
  dataTypeOnChange = (dataType) => {
    this.setState({ dataType: dataType, data: [], hasMore: true })
  }
  loadMore = (event) => {
    if (this.state.hasMore) {
      api('/Monitoring/CheckListPage', this.query).then((data) => {
        this.query.pageindex += 1;
        this.state.data = this.state.data.concat(data.data);
        if (data.data.length < pagesize) {
          this.setState({ data: this.state.data, hasMore: false })
        } else {
          this.setState({ data: this.state.data })
        }
      });
    }
  }
  dateSelect = () => {
    this.refs.selectDate.show()
  }
  complete = (begin_date, end_date) => {
    this.setState({
      start: begin_date,
      end: end_date,
    })
  }
  render() {
    let { dataType, hasMore, data, start, end } = this.state;
    return <div id="storeRecord" className="flex-col">
      {/* <div className="device-container">
        <List className="picker-list mb20">
          <div className="deviceItem device-border flex-vcenter">
            <SelectTitle classStyle="name">{i18n.get('实体名称')}</SelectTitle>
            <SubViewLink moduleName="selectDataTypeId" className="flex-g-1 text-right deviceItemContent" title={i18n.get('选择实体')} modelData={{ onChange: this.dataTypeOnChange }}>
              {dataType ? dataType.Name : <div style={{ color: '#909090' }}>{i18n.get('选择实体')}</div>}
            </SubViewLink>
          </div>
          <SelectDateComponent className="deviceItem device-border flex-vcenter" value={[start, end]} onChange={(value) => { this.dateOnChange(value) }}>
            <SelectTitle classStyle="add-group">{i18n.get('时段选择')}</SelectTitle>
            <div className="flex-g-1 text-right deviceItemContent">
              {start}-{end}
            </div>
          </SelectDateComponent>
        </List> 
    </div>*/}
      <div className="flex-g-1 scroll-absolute">
        <div>
          <InfiniteScroll
            pageStart={0}
            useWindow={false}
            loadMore={this.loadMore}
            hasMore={hasMore}
            threshold={50}
          >
            <TableBox heads={[i18n.get('有效日期'), i18n.get('抓拍日期'), i18n.get('分数'), , i18n.get('操作')]} >
              {data.map((item, index) => (
                <tr key={item.num}>
                  {/* <td>
                    <p>{item.ShopName}</p>
                    <p>{item.CheckPlanName}</p>
                  </td> */}
                  <td>
                    <p>{item.StartDate ? moment(item.StartDate).format('YYYY-MM-DD') : ''}-</p>
                    <p>{item.EndDate ? moment(item.EndDate).format('YYYY-MM-DD') : ''}</p>
                  </td>
                  <td>{item.CtrDate ? moment(item.CtrDate).format('YYYY-MM-DD HH:mm') : '-'}</td>
                  <td>{item.Match}</td>
                  <td>
                    <SubViewLink moduleName="imgRecord" title={i18n.get("图片记录")}
                      modelData={{
                        id: this.props.modelData ? this.props.modelData.ShopId : null,
                        start: moment().add(-100, 'days').format('YYYY-MM-DD'),
                        end: moment().format('YYYY-MM-DD'),
                      }}>
                      {i18n.get("查看图片")}
                    </SubViewLink>
                  </td>
                </tr>
              ))}
            </TableBox>
          </InfiniteScroll>
        </div>
      </div>
    </div >
  }
}

export default StoreRecord;